<template>
    <view>
        <uni-nav-bar title="订单列表" left-icon="left" backgroundColor="#fff" :border="false" @clickLeft="clickLeft"></uni-nav-bar>
        <view v-if="orderList.length">
            <view class="pd20" v-for="i in orderList" :key="i._id">
                <view class="card" @click="orderMsg(i._id)">
                    <view class="no">
                        <view class="flex jcsb">
                            <text class="fs28">
                                <b>订单号</b>
                                {{ i.order_no }}
                            </text>
                            <text class="tag">商家外送</text>
                        </view>
                        <view class="payIcon">
                            <u-icon name="zhifubao" size="20" color="#1578ff" v-if="i.provider == 'alipay'"></u-icon>
                            <u-icon name="weixin-fill" size="20" color="#04c15f" v-if="i.provider == 'wxpay'"></u-icon>
                            <view class="mgl20">
                                <text v-if="i.states == 1">已支付</text>
                                <text v-else class="cr">支付异常</text>
                            </view>
                        </view>
                    </view>
                    <view class="content">
                        <view v-for="j in i.cardList">
                            {{ j.name }}
                        </view>
                    </view>
                    <view class="msg">
                        <view>{{ timeFormat(i.createTime) }}</view>
                        <view>共{{ i.cardList.length }}件商品,实付￥{{ priceFrom(i.total_fee) }} 元</view>
                    </view>
                </view>
            </view>
        </view>
        <view v-else class="mgt40">
            <u-empty mode="list"></u-empty>
        </view>
    </view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { priceFrom, timeFormat } from '../../../utils/tools.js';

const orderObj = uniCloud.importObject('mall-order');
const orderList = ref([]);
const getOrder = async () => {
    let res = await orderObj.getOrderList();
    orderList.value = res.data;
};
const orderMsg = (id) => {
    uni.navigateTo({
        url: './detail?id=' + id
    });
};
const clickLeft = () => {
    // uni.navigateTo({
    //     url: '/pages/shop/shopDetail'
    // });
    uni.navigateBack();
};
onMounted(() => {
    getOrder();
});
</script>

<style scoped lang="scss">
.card {
    @include cardBase();

    .no {
        .tag {
            border-radius: 40rpx;
            font-size: $uni-font-size-sm;
            padding: 5rpx 10rpx;
            background-color: $uni-color-success;
            color: #fff;
        }

        .payIcon {
            font-size: $uni-font-size-sm;
            display: flex;
        }
    }

    .content {
        background-color: $uni-bg-color-grey;
        padding: 20rpx 20rpx;
        margin-top: 20rpx;
    }

    .msg {
        font-size: $uni-font-size-sm;
        @include flex-box();
        margin-top: 20rpx;
        color: $uni-color-grey;
    }
}
</style>
